<template>
	<view class="">
		<view class="page">

			<!-- <view class="head-bg" :style="{'background-image':'url('+top_bg+')'}"> -->
			<view class="head-bg">
				<view class="status-bar">

				</view>

				<text class="title">我的</text>

				<view class="member-info" @click="isLogin">
					<u-avatar :src="avatar" size="50"></u-avatar>

					<view class="member-nick">
						<!-- <text>{{nickName}}</text> -->
						<text>{{phone}}</text>
					</view>
				</view>
			</view>

			<view class="bottom-content">
				<!-- #ifdef H5 -->
				<view class="my-order card" v-if="true">
					<text>我的订单</text>

					<view class="order">
						<view class="order-item" @click="goCarOrderList">
							<image src="@/static/mine/mine_order1.png"></image>
							<text>车辆订单</text>
						</view>
					</view>
				</view>
				<!-- #endif -->

				<!-- #ifndef H5 -->
				<view class="my-order card" v-if="true">
					<text>我的订单</text>

					<view class="order">
						<view class="order-item" @click="goTestDriveList">
							<image src="@/static/mine/mine_order0.png"></image>
							<text>试驾订单</text>
						</view>

						<view class="order-item order-item1" @click="goCarOrderList">
							<image src="@/static/mine/mine_order1.png"></image>
							<text>车辆订单</text>
						</view>

						<!-- <view class="order-item" @click="goActivityOrder">
							<image src="@/static/mine/mine_order2.png"></image>
							<text>活动订单</text>
						</view> -->
					</view>
				</view>			
				<view class='app-sty'>
					<view class='app-sty-left'>
						<view class='app-tit'>下载卡文e家APP获取更多服务</view>
						<text class='app-val' @click='download'>下载</text>
					</view>
					<view class='app-sty-right'>
						<image src="@/static/mine/mine_icon_logo@2x.png"></image>
					</view>
				</view>
				<view class="card" style="margin: 0upx 36upx 0;padding: 0 36upx;">
					<mine-item name="我的车辆" imgSrc="../../static/mine/mine_icon_wdcl@2x.png" @itemClick="goMycar"></mine-item>
					<view class='line'></view>
					<!-- <mine-item v-if="showBank" name="银行卡" imgSrc="@/static/mine/mine_icon_yhq@2x.png"
						@itemClick="goMyBankCard"></mine-item> -->
					<!-- <mine-item name="优惠券" imgSrc="../../static/mine/mine_icon_yhq@2x.png" @itemClick="goMyCoupon">
					</mine-item> -->
				</view>

				<view class="card" style="margin: 15upx 36upx 0;padding: 0 39upx;">
					<mine-item name="企业介绍" imgSrc="../../static/mine/mine_icon_qyjs@2x.png" @itemClick="goIntro"></mine-item>
					<view class='line'></view>
					<mine-item name="消息通知" imgSrc="../../static/mine/mine_icon_xxzz@2x.png" @itemClick="goMsg"></mine-item>
					<view class='line'></view>
					<!-- <mine-item name="合作加盟" imgSrc="@/static/mine/mine_icon_yhq@2x.png" @itemClick="goJoin"></mine-item> -->
					<mine-item name="意见反馈" imgSrc="../../static/mine/mine_icon_yjfk@2x.png" @itemClick="goFeedBack"></mine-item>
					<view class='line'></view>
					<mine-item name="客服热线" imgSrc="../../static/mine/mine_icon_kfrx@2x.png" @itemClick="goPhone">
					<!-- <mine-item name="客服中心" :imgSrc="small_service" @itemClick="goService"></mine-item>
					<mine-item name="预约记录" :imgSrc="small_service" @itemClick="goMaintenance"> -->
					</mine-item>
				</view>
				<!-- #endif -->

				<text class="logout" @click="logout" v-if="!isNotLogin">退出登录</text>

				<view style="margin: 30upx 0 0;text-align: center;">
					<text style="font-size: 24upx;color: #a7a7a7;">技术支持：北京卡文新能源汽车有限公司</text>
				</view>
			</view>

			<u-modal title="提示" content="" :show="showLogout" showCancelButton closeOnClickOverlay @confirm="confirm"
				@cancel="cancel" @close="close">
				<view style="text-align: center;font-size: 32upx;color: #A7A7A7;">确定退出登录吗？</view>
			</u-modal>

		</view>

		<HomeTabbar :tab="2"></HomeTabbar>
		<!-- 登录弹窗 -->
		<LoginMask></LoginMask>
	</view>
</template>

<script>
	import get from 'lodash/get';
	import HomeTabbar from '@/components/layout/tabbar.vue';
	import mineItem from '@/components/mine/mine-item.vue';
	import LoginMask from '@/components/layout/login-mask.vue';
	import {
		subscribeList,
		memberAccount,
		getDaiKouFlag,
		doMemberLogin
	} from '../../common/api.js';

	import {
		signout
	} from '../../common/apis/login-api.js';

	export default {
		components: {
			mineItem,
			HomeTabbar,
			LoginMask,
		},

		data() {
			return {
				top_bg: this.baseImageUrl + 'uni_rental/00@2x.png',
				invite_bg: this.baseImageUrl + 'uni_rental/推广banner@2x.png',
				small_coupon: this.baseImageUrl + 'uni_rental/个人中心优惠券@2x.png',
				small_activity: this.baseImageUrl + 'uni_rental/订单@2x.png',
				small_msg: this.baseImageUrl + 'uni_rental/消息通知@2x.png',
				small_unit: this.baseImageUrl + 'uni_rental/合作加盟@2x.png',
				small_intro: this.baseImageUrl + 'uni_rental/企业介绍@2x.png',
				small_service: this.baseImageUrl + 'uni_rental/客服.png',
				small_car: this.baseImageUrl + 'uni_rental/车辆.png',
				small_bank: this.baseImageUrl + 'uni_rental/银行卡.png',
				showLogout: false,
				carSub: [],
				orderSub: [],
				drawalInfo: {},
				showBank: false
			}
		},

		computed: {
			userInfo() {
				if (!uni.$u.test.isEmpty(this.$store.state.user.userInfo)) {
					// this.getDrawalInfo();
				}
				return this.$store.state.user.userInfo;
			},
			openid() {
				return this.$store.state.user.openid;
			},
			avatar() {

				if(uni.$u.test.isEmpty(this.userInfo.portraitImg)){
					return this.baseImageUrl+'uni_rental/用户默认头像.png'
				}else{
					return this.userInfo.portraitImg;
				}

				// return get(this.userInfo, 'portraitImg',
				// 	'https://img2.baidu.com/it/u=304846655,1860504905&fm=26&fmt=auto');
			},
			// nickName() {
			// 	return get(this.userInfo, 'nickName', '点击登录');
			// },
			phone() {

				if(uni.$u.test.isEmpty(this.userInfo.phone)){
					return '点击登录';
				}else{
					return this.userInfo.phone;
				}

				// return get(this.userInfo, 'phone', '点击登录');
			},

			isNotLogin() {
				return uni.$u.test.isEmpty(this.$store.state.user.userInfo);
			}
		},
		onLoad(op) {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage','shareTimeline']
			})
			if (op && op.scene) {
				let scene = op && op.scene.split('_');
				let memberNo = scene[0]; // memberNo
				console.log(memberNo)
				if (memberNo) {
					// 存入分享上级
					this.$store.commit('user/saveinviterId', memberNo);
				}
			}
			this.getSub();
		},
		onShow() {
			getDaiKouFlag().then(res => {
				this.showBank = res == 1
			})
		},

		methods: {
			goPhone(){
				uni.makePhoneCall({
					phoneNumber: '12312313',
					success: (res) => {
					}
				})
			},
			download(){
				let url = 'https://ehome.cavanauto.com/'
				uni.navigateTo({
					url:'/pages/mine/webview/webview?url='+url
				})

			},
			async isLogin() {
				if (!this.isNotLogin) {
					return
				}
				let that = this;
				return await this.$store.dispatch('user/MmvLogin'); // 获取openid

				// if (uni.$u.test.isEmpty(this.openid)) {
				// } else {
				// }


			},

			onShareAppMessage() {
				return {
					// title: '哈哈哈',
					// imageUrl: this.baseImageUrl + this.activityInfo.shareImage,
					path: '/pages/home/home?customerId=' + this.$store.state.user.userInfo.customerId + '&deptId='+this.$store.state.user.deptId
				}
			},

			getDrawalInfo() {

				uni.$u.throttle(() => {
					memberAccount(
						this.$store.state.user.userInfo.customerId,
					).then(res => {
						this.drawalInfo = res;
					})
				}, 1000)

			},

			getSub() {
				subscribeList({
					params: {
						type: 3
					}
				}).then(res => {
					this.orderSub = res;
				})

				subscribeList({
					params: {
						type: 4
					}
				}).then(res => {
					this.carSub = res;
				})
			},

			goTestDriveList() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {
					uni.navigateTo({
						url: '../../pagesB/mine/testdrivelist/testdrivelist'
					})
				}
			},

			goCarOrderList() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {


					uni.requestSubscribeMessage({
						tmplIds: this.orderSub,
						success(res) {
							// if (res[tmplIds] == 'reject') {
							// }
							uni.navigateTo({
								url: '../../pagesB/mine/car-orderlist/car-orderlist'
							})
						},
						fail(e) {
							uni.navigateTo({
								url: '../../pagesB/mine/car-orderlist/car-orderlist'
							})
							// wx.showToast({
							// 	title: e.errMsg,
							// 	icon: 'none'
							// })
						}
					})



				}
			},
			goFeedBack(){
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {
					uni.navigateTo({
						url: '../../pagesB/mine/servicecenter/feedback'
					})
				}
			},
			goActivityOrder() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {
					uni.navigateTo({
						url: '../activity/activity-orderList'
					})
				}
			},
			goMyCoupon() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {
					uni.navigateTo({
						url: '../coupon/mine-couponList'
					})
				}

			},
			goPointsDetail() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {
					uni.navigateTo({
						url: '../../pagesB/mine/points/points'
					})
				}

			},

			goIntro() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {
					uni.navigateTo({
						url: '../../pagesB/mine/companyintro/companyintro'
					})
				}

			},

			goService() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {
					uni.navigateTo({
						url: '../../pagesB/mine/servicecenter/servicecenter'
					})
				}

			},
			goMaintenance(){
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {
					uni.navigateTo({
						url: '../../pagesB/mine/maintenanceRecords/maintenanceRecords'
					})
				}
			},

			goMycar() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {

					uni.requestSubscribeMessage({
						tmplIds: this.orderSub,
						success(res) {
							// if (res[tmplIds] == 'reject') {
							// }

							uni.navigateTo({
								url: '../../pagesB/mine/carownerservice/mycar/mycar'
							})
						},
						fail(e) {

							uni.navigateTo({
								url: '../../pagesB/mine/carownerservice/mycar/mycar'
							})
							// wx.showToast({
							// 	title: e.errMsg,
							// 	icon: 'none'
							// })
						}
					})


				}
			},

			goJoin() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {
					uni.navigateTo({
						url: '../../pagesB/mine/join/join'
					})
				}

			},

			goMyBankCard() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {
					uni.navigateTo({
						url: '../../pagesB/mine/mybankcard/mybankcard'
					})
				}

			},

			goMsg() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {
					uni.navigateTo({
						url: '../../pagesB/mine/message/message'
					})
				}

			},


			logout() {
				if (!this.isNotLogin) {
					this.showLogout = true;
				}

			},
			confirm() {
				// signout({
				// 	openid: this.openid
				// }).then(res => {
					this.showLogout = false
					//退出登录
					let cityName = uni.getStorageSync('cityName')
					let cityCode = uni.getStorageSync('cityCode')
					this.$store.commit('user/saveOpenid', '');
					this.$store.commit('user/saveUserInfo', {});
					uni.clearStorageSync();
					uni.setStorageSync('cityName',cityName)
					uni.setStorageSync('cityCode',cityCode)


					uni.$emit('logout', true);



				// })

			},
			cancel() {
				this.showLogout = false
			},
			close() {
				uni.setStorageSync('phone','')
				uni.setStorageSync('userInfo','')
				this.showLogout = false
			}

		}
	}
</script>

<style lang="scss">
	.line{
		width: 100%;
		border-bottom: 1upx solid #eeeeee;
	}
	.app-sty{
		background:linear-gradient(to right, #173B42, #498D97);
		margin:32upx;
		padding: 32upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.app-sty-left{
			width: 75%;
			.app-tit{
				color:#ffffff;
				font-size: 32upx;
				margin-bottom: 16upx;
				font-weight: bold;
			}
			.app-val{
				padding:4upx 32upx;
				color:#ffffff;
				font-size: 24upx;
				background-color:rgba(255, 255, 255, 0.20) ;
				border-radius: 8upx;
			}
		}
		.app-sty-right{
			width: 25%;
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width:104upx ;
				height: 104upx;
			}
		}
	}
	.page {
		position: relative;
		@include flex(column);
	}

	.head-bg {
		// background: linear-gradient(#3cd4b6, #009B01);
		height: 380upx;
		text-align: center;
		// background-repeat: no-repeat;
		// background-size: 100% 100%;
		background: linear-gradient(to right bottom, #EEF7FE, #D8ECFC, #F8F8F8 );

		.status-bar {
			height: var(--status-bar-height);
			width: 100%;
		}

		.title {
			display: inline-block;
			color: #000000;
			font-size: 36upx;
			margin-top: 16upx;
			letter-spacing: 3upx;
			font-weight: bold
		}

		.member-info {
			@include flex;
			margin: 69upx 63upx 0 75upx;

			.member-nick {
				@include flex(column);
				flex-grow: 1;
				justify-content: center;
				padding: 2upx 20upx;
				font-size: 32upx;
				font-weight: bold;
				color: #000000;
				align-items: flex-start;

				text {
					color: #000000;
					font-size: 32upx;
				}

			}

			.points {
				@include flex;
				background-color: $yellowff;
				border-radius: 90upx;
				height: 43upx;
				margin-top: 8upx;
				padding: 0 20upx;
				color: $black33;
				align-items: center;
				justify-content: center;

				// u-icon {
				// font-family: uicon-iconfont;
				// }

				text {
					font-size: 24upx;
					//字体会影响图片显示。。。
					// font-family: PingFang SC, PingFang SC-Bold;
					letter-spacing: 3upx;
				}
			}

		}
	}

	.bottom-content{
		@include flex(column);
		position: relative;
		top: -70upx;
	}

	.my-order {
		height: 240upx;
		margin: 0 36upx 20upx;

		text {
			display: inline-block;
			font-size: 32upx;
			margin: 32upx 0 0 32upx;
			font-weight: bold;
		}

		.order {
			@include flex;
			justify-content: space-between;
			padding:32upx;

			.order-item {
				background-color:#DDEFFE;
				border-radius: 8upx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 48%;
				height:100upx ;

				image {
					width: 40upx;
					height: 40upx;
				}

				text {
					font-size: 28upx;
					margin: 0 0 0 10upx;
					color:#000000;
				}
			}
			.order-item1{
				background-color: #C8DD41 ;
			}
		}
	}

	.test {
		margin: 0upx 36upx 0;

		.invite {
			width: 100%;
			height: 200upx;
			box-shadow: 2upx $grayef;
		}
	}

	.profit {
		height: 235upx;
		margin: 10upx 36upx 0;
		@include flex;
		align-items: center;

		.profit-item {
			@include flex(column);
			justify-content: center;

			.rect-text {
				width: 171upx;
				height: 56upx;
				text-align: center;
				line-height: 56upx;
				font-size: 26upx;
				color: $black33;
				margin-top: 10upx;
				border-radius: 90upx;
				border: solid 2upx $black66;
				position: relative;
				left: -10upx;
				// box-sizing: border-box;
			}

			.circle-text {
				width: 173upx;
				height: 58upx;
				text-align: center;
				line-height: 58upx;
				font-size: 26upx;
				color: $white;
				margin-top: 10upx;
				background-color: #009B01;
				border-radius: 90upx;
				position: relative;
				left: -10upx;
			}
		}
	}

	.logout {
		height: 98upx;
		display: block;
		text-align: center;
		line-height: 100upx;
		font-size: 28upx;
		color: #173B42 ;
		border-radius: 8upx;
		background-color: #ffffff;
		// border: solid 2upx $green20;
		margin: 40upx 36upx 60upx;
		font-family: PingFang SC, PingFang SC-Bold;

	}
</style>
